<template>
    <div>
      <div class="i-layout-page-header">
        <PageHeader
          class="product_tabs"
          title="邀群活动列表"
          hidden-breadcrumb
        ></PageHeader>
      </div>
      <Card :bordered="false" dis-hover class="ivu-mt">
        <Form
          ref="tableFrom"
          :model="tableFrom"
          :label-width="labelWidth"
          :label-position="labelPosition"
          @submit.native.prevent
        >
          <Row type="flex" :gutter="24">
            <Col v-bind="grid">
              <FormItem label="活动类型：" label-for="is_show">
                <Select
                  v-model="tableFrom.is_show"
                  placeholder="请选择"
                  clearable
                  @on-change="userSearchs"
                >
                  <Option value="1">正常</Option>
                  <Option value="0">未开启</Option>
                </Select>
              </FormItem>
            </Col>
            <Col v-bind="grid">
              <FormItem label="活动名称：" label-for="title">
                <Input
                  search
                  enter-button
                  v-model="tableFrom.title"
                  placeholder="请输入活动名称"
                  @on-search="userSearchs"
                />
              </FormItem>
            </Col>
          </Row>
          <Row type="flex">
            <Col v-bind="grid">
              <Button
                v-auth="['admin-marketing-store_coupon-add']"
                type="primary"
                icon="md-add"
                @click="add"
                >添加活动</Button
              >
            </Col>
          </Row>
        </Form>
        <Table
          :columns="columns1"
          :data="tableList"
          ref="table"
          class="mt25"
          :loading="loading"
          highlight-row
          no-userFrom-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
        >
          <template slot-scope="{ row }" slot="begin_time">
            <div>
              {{ row.start_time}} - {{ row.end_time}}
            </div>
          </template>
          <template slot-scope="{ row }" slot="status">
            <i-switch
              v-model="row.status"
              :value="row.status"
              :true-value="1"
              :false-value="-1"
              size="large"
              @on-change="openChange(row)"
            >
              <span slot="open">开启</span>
              <span slot="close">关闭</span>
            </i-switch>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <!-- <a @click="receive(row)">领取记录</a> -->
            <!-- <Divider type="vertical" /> -->
            <a @click="copy(row)">编辑</a>
            <Divider type="vertical" />
            <a @click="couponDel(row, '删除发布的卡包', index)">删除</a>
            <Divider type="vertical" />
            <a @click="receive(row)">领取记录</a>
          </template>
        </Table>
        <div class="acea-row row-right page">
          <!-- <Page
            :total="total"
            :current="tableFrom.page"
            show-elevator
            show-total
            @on-change="pageChange"
            :page-size="tableFrom.limit"
          /> -->
           <Page
            :total="tableFrom.total"
            :current="tableFrom.pageNum"
            show-elevator
            show-total
            @on-change="pageChange"
            :page-size="tableFrom.pageSize"
            @on-page-size-change="limitChange"
            />
        </div>
      </Card>
      <!-- 领取记录 -->
      <Modal
        v-model="modals2"
        scrollable
        footer-hide
        closable
        title="领取记录"
        :mask-closable="false"
        width="700"
      >
        <Table
          :columns="columns2"
          :data="receiveList"
          ref="table"
          class="mt25"
          :loading="loading2"
          highlight-row
          no-userFrom-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
        >
          <template slot-scope="{ row, index }" slot="nickname">
            <div>{{ row.user.nickname }}</div>
          </template>
          <template slot-scope="{ row, index }" slot="phone">
            <div>{{ row.user.phone }}</div>
          </template>
          <template slot-scope="{ row, index }" slot="type">
            <div v-if="row.prize.type == 1">积分</div>
            <div v-if="row.prize.type == 2">优惠卷</div>
            <div v-if="row.prize.type == 3">卡包</div>
          </template>
          <template slot-scope="{ row, index }" slot="name">
            <div>{{ row.prize.name }}</div>
          </template>
          <template slot-scope="{ row, index }" slot="num">
            <div>{{ row.prize.num }}</div>
          </template>
          <template slot-scope="{ row, index }" slot="is_del">
            <div>{{ row.is_del==1?'无效':'有效' }}</div>
          </template>
          
          <!-- <template slot-scope="{ row, index }" slot="avatar">
            <viewer>
              <div class="tabBox_img">
                <img v-lazy="row.avatar" />
              </div>
            </viewer>
          </template> -->
        </Table>
        <div class="acea-row row-right page">
          <Page
            :total="total2"
            show-elevator
            show-total
            @on-change="receivePageChange"
            :page-size="receiveFrom.limit"
          />
         
        </div>
      </Modal>
    </div>
  </template>
  
  <script>
  import { mapState } from "vuex";
  import {
    set_statusShowApi,
    activityList,
    activityDel,
    releasedList
  } from "@/api/marketing";
  export default {
    name: "storePackage",
    data() {
      return {
        modals2: false,
        grid: {
          xl: 7,
          lg: 7,
          md: 12,    
          sm: 24,
          xs: 24,
        },
        loading: false,
        columns1: [
          {
            title: "ID",
            key: "id",
            width: 80,
          },
          {
            title: "活动名称",
            key: "name",
            minWidth: 120,
          },
          {
            title: "活动类型",
            key: "activity_type",
            minWidth: 80,
          },
          {
            title: "活动时间段",
            slot: "begin_time",
            minWidth: 250,
            align: "center"
          },
          {
            title: "是否开启",
            slot: "status",
            minWidth: 90,
          },
          {
            title: "操作",
            slot: "action",
            fixed: "right",
            minWidth: 200,
          },
        ],
        // 底部分页
        tableFrom: {
          is_show: "",
          title: "",
          issue_type: "",
          page: 1,
          limit: 10,
          total: 0, // 总条数
          pageNum: 1, // 当前页
          pageSize: 10, // 每页显示条数
        },
        issue_type: "",
        tableList: [],
        total: 0,
        FromData: null,
        receiveList: [],
        loading2: false,
        columns2: [
          {
            title: "用户名",
            slot: "nickname",
            minWidth: 120,
          },
          {
            title: "手机号",
            slot: "phone",
            minWidth: 120,
          },
          {
            title: "奖品类型",
            slot: "type",
            minWidth: 80,
          },
          {
            title: "奖品名称",
            slot: "name",
            minWidth: 150,
          },
          {
            title: "邀请人数",
            slot: "num",
            minWidth: 80,
          },
          {
            title: "是否有效",
            slot: "is_del",
            minWidth: 100,
          },
          // {
          //   title: "用户头像",
          //   slot: "avatar",
          //   minWidth: 100,
          // },
          {
            title: "领取时间",
            key: "add_time",
            minWidth: 140,
          },
        ],
        total2: 0,
        receiveFrom: {
          page: 1,
          limit: 10,
        },
        rows: {},
      };
    },
    created() {
      this.getList();
    },
    computed: {
      ...mapState("admin/layout", ["isMobile"]),
      labelWidth() {
        return this.isMobile ? undefined : 90;
      },
      labelPosition() {
        return this.isMobile ? "top" : "left";
      },
    },
    methods: {
      // 领取记录
      receive (row) {
          this.modals2 = true;
          this.rows = row;
          this.getReceivelist(row)
      },
      getReceivelist(row) {
        this.loading2 = true;
        releasedList(row.id,this.receiveFrom)
          .then(async (res) => {
            let data = res.data;
            this.receiveList = data.list;
            this.total2 = res.data.count;
            this.loading2 = false;
          })
          .catch((res) => {
            this.loading2 = false;
            this.$Message.error(res.msg);
          });
      },
      // 领取记录改变分页
      receivePageChange(index) {
        this.receiveFrom.page = index;
        this.getReceivelist(this.rows);
      },
      // 删除
      couponDel(row, tit, num) {
        let delfromData = {
          title: tit,
          num: num,
          success: activityDel(row.id),
        };
        this.$modalSure(delfromData)
          .then((res) => {
            this.$Message.success(res.msg);
            this.tableList.splice(num, 1);
          })
          .catch((res) => {
            this.$Message.error(res.msg);
          });
      },
      // 列表
      getList() {
        this.loading = true;
        this.tableFrom.issue_type = this.issue_type === "all" ? "" : this.issue_type;
        this.tableFrom.is_show = this.tableFrom.is_show || "";
        activityList(this.tableFrom)
          .then(async (res) => {
            let data = res.data;
            this.tableList = data.list;
            this.loading = false;
            this.tableFrom.total = data.count;
          })
          .catch((res) => {
            this.loading = false;
            this.$Message.error(res.msg);
          });
      },
      pageChange(index) {
        this.tableFrom.page = index;
        this.getList();
      },
      limitChange(limit) {
        this.tableFrom.pageSize = limit;
        this.getList();
      },
      // 表格搜索
      userSearchs() {
        this.tableFrom.page = 1;
        this.getList();
      },
      // 添加
      add() {
        this.$router.push({ path: "/admin/marketing/invitingGroups/create"});
      },
      // 修改
      copy(data) {
        this.$router.push({
          path: `/admin/marketing/invitingGroups/create/${data.id}`,
        });
      },
      // 是否开启
      openChange(data) {
        set_statusShowApi(data).then(() => this.getList());
      },
    },
  };
  </script>
  
  <style scoped lang="stylus">
  .fa
      color #0a6aa1
      display block
  .sheng
     color #ff0000
     display block
  .tabBox_img
      width 36px
      height 36px
      border-radius:4px
      cursor pointer
      img
          width 100%
          height 100%
  </style>
  